import React from 'react';
import Layout from '../components/layout';
import Container from '../components/container';
import styles from './about-css-modules.module.css';

const User = props => (
	<div className={styles.user}>
		<img src={props.avatar} className={styles.avatar} alt="" />
		<div className={styles.description}>
			<h2 className={styles.username}>{props.username}</h2>
			<p className={styles.excerpt}>{props.excerpt}</p>
            <p className={styles.excerpt}>{props.excerpt}</p>
		</div>
	</div>
);

export default () => (
	<Layout>
		<Container>
			<h1>About CSS Modules</h1>
			<p>CSS Modules are cool</p>
			<User
				username="Jane Doe"
				avatar="http://img.wxcha.com/file/201607/26/cf6a8ce434.jpg"
				excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
			/>

			<User
				username="Bob Smith"
				avatar="http://img.wxcha.com/file/201607/26/cf6a8ce434.jpg"
				excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
			/>
		</Container>
	</Layout>
);
